<template>
	<view class="container">
		<view class="intro">
			<view class="tips">遇见~ 美好~</view>
		</view>
		<view class="bottom" v-if="!isShow">
			<a style="text-decoration: none;"
				href="https://payjs.cn/api/openid?mchid=1613001888&callback_url=https://xxl.today/naicha_ui">
				<button type="primary" size="default" class="login-btn" open-type="getUserInfo"
					@getuserinfo="weiXinLogin" :disabled="logining">
					<image src="/static/images/wechat.png"></image>
					微信授权登录
				</button>
			</a>
		</view>
		<view v-if="isShow">
			<button type="primary" size="default" open-type="getPhoneNumber" class="login-btn"
				@getphonenumber="getUserPhone" >授权</button>
			<!-- 注意：getUserPhone方法不要用括号，不然拿不到参数！！！！ -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logining: false,
				showPop: false, // 显示弹窗
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', // 默认赋值灰色 头像的路径
				isShow: false,
			};
		},
		onLoad() {
			this.handlerLocalToken();
		},
		methods: {
			getUserPhone(e) {
				const _this = this
				// 获取到回调信息，需要code(与登录login的code不同)
				console.log("回调返回的信息：", e)
				uni.login({
					provider: 'weixin',
					success: wxres => {
						_this.logining = false;
						console.log('微信登录 获取到的code=', wxres.code);
						_this.$request(`/vx/getPhoneRegister?code=${wxres.code}&phoneCode=${e.detail.code}`,
							'post').then(
							res => {
								if (res.data.code == 200) {
									_this.logining = true;
									uni.navigateTo({
										url: "/pages/home/home"
									});
								} else {
									_this.isShow = true
								}

							});
					}
				});

			},
			// 通过本地缓存的token去登录
			handlerLocalToken() {
				let token = uni.getStorageSync('token');
				uni.removeStorageSync('token');
				console.log(token);
				this.isShow = false
				if (token!="") {
					// 此处获取用户信息
					uni.reLaunch({
						url: '/pages/home/home'
					});
				}
			},
			weiXinLogin(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: wxres => {
						that.logining = false;
						console.log('微信登录 获取到的code=', wxres.code);
						that.$request(`/vx/login?code=${wxres.code}`, 'post').then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync("token",res.data.data)
								uni.reLaunch({
									url: '/pages/home/home'
								});
							} else {
								that.vxloginCode = wxres.code
								that.isShow = true
								that.$msg(res.data.msg)
							}
						});
						that.logining = true;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.intro {
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}

	.bottom {
		height: 20vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;

		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;

			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.row {
			.grid {
				width: 20%;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>
